<!--  frame 代理商注册 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>代理商注册</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css"/>

	<style>

	body {
	  background-color:#fff;
	}
	.submit1{
		margin-top: 1.30rem;
		width: 100%;
		height: .80rem;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ff502d;
		color: #fff;
		line-height: .60rem;
		border-radius:0.1rem;
		font-size: .32rem;
	}
	.content{
		width: 100%;
	}
  .content1{
  	padding: 0.5rem;
  }
	.title1{
		margin: 0.2rem 0;
		color: 383642;
		font-size: 	0.5rem;
	}
	.row1{
		margin-top: 1rem;
	}
	.dls-row{
		display: flex;
		align-items: center;
		height: 1.1rem;
		border-bottom: solid #eee 1px;
	}
	.dls-row1{
		display: flex;
		min-height: 1.1rem;


	}
 .dls-row input{
 	border: solid #F8F8F8 0px;
 }
 .dls-title{
 	font-size: .32rem;
	font-weight: 700;
	width: 1.7rem;
 }
 .dls-title1{
	 font-size: .32rem;
	 font-weight: 700;
	 width: 1.7rem;
	 line-height:1.1rem;

 }
 .yzm{
 	width: 2rem;
	height: 0.6rem;
	color: #5E95E7;
	background: #eee;
	border-radius:0.1rem;
	display: flex;
	justify-content: center;
	align-items: center;
 }
 .xzdl{
	 width: 2.5rem;
	 height: 0.6rem;
	 color: #000;
	 background: #ddd;
	 border-radius:0.1rem;
	 display: flex;
	 justify-content: center;
	 align-items: center;
 }
 .xzdl-row{
 	height: 1rem;
	display: flex;
	align-items: center;
	justify-content: flex-end;
 }
 .area-div{
 	width: 5rem;
	display: flex;
	flex-direction: column;
 }
 .area{
 	width: 100%;
	height: 1.1rem;
 	display: flex;
	align-items: center;
	justify-content:flex-end;
	 border-bottom: solid #eee 1px;
 }
 .active{
 	margin-left: 0.3rem;
 }
	</style>
</head>
<body>
	<div class="content app" v-cloak>
		<div class="content1">
			<div class="title1">
				代理商注册
			</div>
			<div class="row1">
				<div class="dls-row">
					<div class="dls-title">姓名</div>
					<input type="text" v-model="userName" placeholder="输入您的姓名">
				</div>
				<div class="dls-row">
					<div class="dls-title">手机号</div>
					<input type="number" v-model="phone" placeholder="输入您的手机号">
				</div>
				<div class="dls-row">
					<div class="dls-title">验证码</div>
					<input style="width:2.8rem;" type="number" v-model='code'  placeholder="填写验证码">
					<div class="yzm" @click="getCode">{{codeText}}</div>
				</div>
				<div class="dls-row1">
					<div class="dls-title1">代理区域</div>
					<div class="area-div" >
						<div class="area" v-for="(item,index) in addrs" :key="index">
							<div range="{{item.select1}}" range-key="province" @click="bind1(item.select1,index,1)"  :class="item.value1?'active':''">{{item.value1.province||"请选择省"}}</div>
							<div range="{{item.select2}}" range-key="city" @click="bind1(item.select2,index,2)"  :class="item.value2?'active':''" v-if="item.value1.province">{{item.value2.city||"请选择市"}}</div>
							<div range="{{item.select3}}" range-key="area" @click="bind1(item.select3,index,3)"  :class="item.value3?'active':''" v-if="item.value2.is_area==1">{{item.value3.area||"请选择区县"}}</div>
						</div>
					</div>
				</div>
				<div class="xzdl-row">
					<div @click='AddArea' class="xzdl">新增代理区域</div>
				</div>
			</div>
			<div class="submit1" @click="reg_btn">
				确定注册
			</div>
		</div>
	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
window.addEventListener("apiready",function(){
	index()
});

function index()
{
	var vm = new Vue({
		el: ".app",
		data: {
			   disabled: false,
		     currentTime: 60,
		     userName: '',
		     phone: '',
				 userName:'',
				 code:'',
		     codeNum: '',
		     codeText: "获取验证码",
		     cityName:'代理区域',
		 		addrs: []
		},
		mounted: function(){
					this.AddrInit()
		},
		methods: {
			//新增代理区域
			AddArea(){
				let addrs = this.addrs;
				let last = addrs[addrs.length-1];
				if( last.chosen!="" )
				{
				this.AddrInit();
				}
				else
				api.toast({msg: "请补全代理区域",duration: 2000,location: 'middle'});
			},
			// 地址数据初始化
			AddrInit() {
		    this.addrs.push({
		      select1: [],
		      select2: [],
		      select3: [],
		      value1: {},
		      value2: {},
		      value3: {},
		      chosen: ""
		    });
				AjaxSafe({
			   		url:"/xapp/agent/proList",
			    	loader:true,
					success: function(ret) {
						vm.addrs[vm.addrs.length-1].select1 = (ret.data || []).map((item,index) =>{
							item.name = item.province
							item.index = index
							return item
						})
					},
					failed: function(err){
							alert("网络故障！");
					}
				});
			},
			AddrProc1(area_idx,idx) {
				if(!this.addrs) return
				let item = this.addrs[area_idx].select1[idx];
				this.addrs[area_idx].value1 = item;
				this.addrs[area_idx].value2 = {};
				this.addrs[area_idx].value3 = {};
				this.addrs[area_idx].select2 = [];
				this.addrs[area_idx].select3 = [];
				this.addrs[area_idx].chosen = "";
				let param = {
 						province_id: item.provinceid
				}
				AjaxSafe({
			   		url:"/xapp/agent/cityList",
			    	data:param,
			    	loader:true,
					success: function(ret) {

						vm.addrs[area_idx].select2 = (ret.data || []).map((item,index) =>{
							item.name = item.city
							item.index = index
							return item
						})
					},
					failed: function(err){
							alert("网络故障！");
					}
				});
			},
			AddrProc2(area_idx,idx) {
				if(!this.addrs) return
				let item = this.addrs[area_idx].select2[idx];
				this.addrs[area_idx].value2 = item;
				this.addrs[area_idx].value3 = {};
				this.addrs[area_idx].select3 = [];
				this.addrs[area_idx].chosen = item.is_area == 1 ? "" : item.cityid;

				if (item.is_area == 1) {
					let param = {
							city_id: item.cityid
					}
					AjaxSafe({
				   		url:"/xapp/agent/areaList",
				    	data:param,
				    	loader:true,
						success: function(ret) {
							vm.addrs[area_idx].select3 = (ret.data || []).map((item,index) =>{
								item.name = item.area
								item.index = index
								return item
							})
						},
						failed: function(err){
								alert("网络故障！");
						}
					});
				}
			},
			AddrProc3(area_idx,idx) {
				let item = this.addrs[area_idx].select3[idx];
				this.addrs[area_idx].value3 = item;
				this.addrs[area_idx].chosen = item.areaid;
			},
			// 类型筛选
			bind1(datas,index,ss){
					var UIActionSelector = api.require('UIActionSelector');
					UIActionSelector.open({
							datas: datas,
							layout: {
									row: 5,
									col: 1,
									height: 30,
									size: 12,
									sizeActive: 14,
									rowSpacing: 5,
									colSpacing: 10,
									maskBg: 'rgba(0,0,0,0.2)',
									bg: '#fff',
									color: '#888',
									colorActive: '#f00',
									colorSelected: '#f00'
							},
							animation: true,
							cancel: {
									text: '取消',
									size: 12,
									w: 90,
									h: 35,
									bg: '#fff',
									bgActive: '#ccc',
									color: '#888',
									colorActive: '#fff'
							},
							ok: {
									text: '确定',
									size: 12,
									w: 90,
									h: 35,
									bg: '#fff',
									bgActive: '#ccc',
									color: '#888',
									colorActive: '#fff'
							},
							title: {
									text: '请选择',
									size: 12,
									h: 44,
									bg: '#eee',
									color: '#888'
							},
							// actives:[vm.bindTypsindex],
							fixedOn: api.frameName
					}, function(ret, err) {
							if(ret.eventType == 'ok'){
								if(ss==1){
										vm.AddrProc1(index,ret.selectedInfo[0].index)
								}else if(ss==2){
									  vm.AddrProc2(index,ret.selectedInfo[0].index)
								}else if(ss==3){
									  vm.AddrProc3(index,ret.selectedInfo[0].index)
								}

							}

				});
			},

  //获取验证码按钮
  getCode: function() {
		if(this.disabled) return
    var phone = this.phone;
    var currentTime = this.currentTime //把手机号跟倒计时值变例成js值
    var warn = null; //warn为当手机号为空或格式不正确时提示用户的文字，默认为空

    if (phone == '') {
			api.toast({msg: "手机号不能为空！",duration: 2000,location: 'middle'});
		} else if (!hhRegex.isPhone(phone)) {
			api.toast({msg: "手机号格式不正确",duration: 2000,location: 'middle'});
    } else {

				this.disabled = true
       //设置一分钟的倒计时
       var interval = setInterval(function() {
				 console.log(currentTime);
        currentTime-- //每执行一次让倒计时秒数减一
        vm.codeText = currentTime + 's后重发' //按钮文字变成倒计时对应秒数
        //如果当秒数小于等于0时 停止计时器 且按钮文字变成获取验证码 且按钮变成可用状态 倒计时的秒数也要恢复成默认秒数 即让获取验证码的按钮恢复到初始化状态只改变按钮文字
        if (currentTime <= 0) {
          clearInterval(interval)

            vm.codeText = '获取验证码'
            vm.currentTime = 60
            vm.disabled = false

        }
      }, 1000);
			let param = {
						phone:phone
				}
				AjaxSafe({
			   		url:"/xapp/agent/findcode",
			    	data:param,
			    	loader:true,
					success: function(res) {
					        api.toast({msg: res.msg,duration: 3000,location: 'middle'});

					},
					failed: function(err){
							alert("网络故障！");
					}
				});
      //当手机号正确的时候提示用户短信验证码已经发送

    };
  },
	//确认注册
  reg_btn: function() {
    if (this.userName == '') {
			api.toast({msg: '请输入姓名',duration: 3000,location: 'middle'});
      return;
    }
    if (!hhRegex.isPhone(this.phone)) {
      api.toast({msg: '请输入正确的手机号',duration: 3000,location: 'middle'});
      return;

    }
    if (this.code.length < 4) {
			api.toast({msg: '验证码长度小于4',duration: 3000,location: 'middle'});
      return;
    }
    let isAreaFill = true;
    let Citys = [];
    let Areas = [];
    this.addrs.forEach(item=>{
      Citys.push(item.value2.cityid || 0);
      Areas.push(item.value3.areaid || 0);
      if(item.chosen=="")
      {
        isAreaFill = false;
      }
    });
		if( !isAreaFill )
		{
			api.toast({msg: "请补全 代理区域",duration: 3000,location: 'middle'});
			return;
		}
    let datas = {}
    datas['agent.agent_name'] = this.userName;
    datas['agent.agent_phone'] = this.phone;
    // datas['citys'] = this.cityId;
    datas['cities'] = Citys.join(",");
    datas['areaes'] = Areas.join(",");
    datas['code'] = this.code;
		AjaxSafe({
	   		url:"/xapp/agent/save",
	    	data:datas,
	    	loader:true,
			success: function(res) {
					if(res.state)
						// wx.redirectTo({ url: "/pages/agency/agency_apply" });
						agency_apply()
					else
						api.toast({msg: res.msg,duration: 2000,location: 'middle'});

			},
			failed: function(err){
					alert("网络故障！");
			}
		});
  },



		},

	});
}

</script>
</html>
